<template>
	<view>
		<van-share-sheet :show="showShare" :options="shareOptions" @close="onshareClose" @select="onSelect" />
		<van-transition :show="showShare" name="fade-down">
			<!-- <view class="sharebox">
				<image src="https://daiyue.gzzhenyi.net/static/products/tuijian.png" mode="widthFix"></image>
				<view class="sbottom">
					<view class="jiage">
						<view>会员价: <text class="vipPrice"> ¥129</text></view>
						<text class="price">¥188</text>
						<text class="yishou">已售124份</text>
					</view>
					<view class="title">家用血氧指夹</view>
					<view class="ewm">
						<image src="https://daiyue.gzzhenyi.net/static/products/ewm.png" mode="widthFix"></image>
						<text>长按识别小程序</text>
					</view>
				</view>
			</view> -->

			<image class="sharebox" :src="path" mode="widthFix"></image>
			<l-painter ref="painter" :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
		</van-transition>

	</view>
</template>

<script>
import vanShareSheet from "@/wxcomponents/vant/share-sheet/index"
import vanTransition from "@/wxcomponents/vant/transition/index"
import { base64ToUrl } from "@/util/util.js"
import baseUrl from "@/api/baseUrl";
export default {
	components: {
		vanShareSheet,
		vanTransition
	},
	data() {
		return {
			baseUrl,
			showShare: false,
			shareOptions: [{
				name: '微信好友',
				icon: 'wechat'
			},
			{
				name: '保存图片',
				icon: 'poster',
			}
			],
			path: ' ',
			poster: {
				css: {
					width: "664rpx",
					paddingBottom: "40rpx",
					background: "#fff",
					borderRadius: '20rpx',
					backgroundColor: '#fff',

				},
				views: [
					{
						src: '',
						type: "image",
						css: {
							width: '664rpx',
							height: '664rpx',
							borderRadius: '20rpx',
							marginBottom: '20rpx',
							objectFit: 'cover'
						}
					},
					{
						type: "view",
						css: {
							color: ' #FF6200',
							fontSize: '26rpx',
							display: 'flex',
							alignItems: 'center',
							columnGap: '20rpx',
							// margin: '10rpx 0',
							padding: '10rpx 20rpx'
						},
						views: [
							{
								text: "会员价",
								type: "text",
								css: {
									fontSize: '32rpx',
									color: "#FF6200",
								}
							},
							{
								text: '',
								type: "text",
								css: {
									color: "#FF6200",
									fontSize: "32rpx",
								},
							},
							{
								text: '',
								type: "text",
								css: {
									color: '#333333',
									fontSize: '24rpx',
									flex: 1,
									textDecoration: 'line-through',
									lineHeight: '27rpx',
									marginLeft: "10rpx",

								},
							},
							{
								text: '',
								type: "text",
								css: {
									fontSize: '22rpx',
									color: '#5C5C5C'
								},
							}
						]
					},
					{
						type: "view",
						css: { padding: '0 20rpx', marginBottom: '40rpx' },
						views: [
							{
								type: "text",
								text: '',
								css: {
									fontSize: '30rpx',
									color: '#333333',

								}
							}
						]


					},
					{
						type: "view",
						css: {
							display: 'flex',
							justifyContent: 'center'
						},
						views: [
							{
								type: "image",
								src: "https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg",
								css: {
									width: '102rpx',
									height: '102rpx',
								},

							},

						]
					},
					{
						type: "view",
						css: {
							display: 'flex',
							justifyContent: 'center'
						},
						views: [
							{
								type: "text",
								text: "长按识别小程序码",
								css: {
									fontSize: '26rpx',
									color: '#333333',
									marginTop: '20rpx'
								}
							}
						]
					}

				]

			}
		}
	},
	methods: {
		onshareClose(e) {
			this.showShare = false
		},
		async onSelect(option) {
			base64ToUrl(this.path, option.index)
		},
		onShows(item, image) {
			this.showShare = true
			this.poster.views[0].src = this.baseUrl + item.image
			this.poster.views[1].views[1].text = `¥${item.vip_price}`
			this.poster.views[1].views[2].text = item.price
			this.poster.views[2].views[0].text = item.title
			this.poster.views[1].views[3].text = `已售${item.comment || 0} 份`
			this.poster.views[3].views[0].src = this.baseUrl + image
		}
	}

}
</script>

<style lang="less">
::v-deep.van-share-sheet__options {
	justify-content: space-evenly;
}
</style>
<style scoped lang="scss">
.sharebox {
	position: fixed;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
	width: 600rpx;
	border-radius: 20rpx;
	background-color: #fff;

	image {
		width: 100%;
		border-radius: 20rpx;
	}

	.sbottom {
		padding: 20rpx;

		.jiage {
			color: #FF6200;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			column-gap: 20rpx;
			margin: 10rpx 0;

			.vipPrice {
				font-size: 32rpx;
			}

			.price {
				color: #A2A2A2;
				font-size: 24rpx;
				flex: 1;
			}

			.yishou {
				font-size: 22rpx;
				color: #5C5C5C;
			}
		}

		.title {
			font-size: 30rpx;
			color: #333333;
			margin-bottom: 40rpx;
		}

		.ewm {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			row-gap: 10rpx;

			image {
				width: 102rpx;
				height: 102rpx;
			}
		}
	}
}
</style>